import React, { Component } from 'react'

import { PageHeader, Spin, Button, Pagination, Divider } from 'antd'
import { openSuccessModal, openModalMessage } from '../../../../components/TableCustomize'
import { BasicLayoutSearch } from '../../../../components/BasicLayout'
import { BasicPagination } from '../../../../components/TableCustomize'
import * as APIService from '../../../../axios/api_yq'
import '../../../../assets/css/Examin.scss'

export default class Examine extends Component {
    state = {
        one: 0,
        loading: true,
        dataSource: [
        ],
        lengths: null,
        allpages: 0,
        dataAll: []
    }
    // 挂载前
    UNSAFE_componentWillMount() {
        setTimeout(() => {
            this.search()
        }, 300);

        this.fetch();
    }
    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }
    //初始化加载数据
    fetch = (pageNum, pageSize) => {
        console.log(pageNum, pageSize);

    }
    // 查询接口
    search = () => {
        let id = JSON.parse(sessionStorage.getItem('compileCheckout1')).id
        let data = `id=${id}`
        APIService.sheetView(data).then((item) => {
            console.log('查询数据', item);
            if (item.data.code === 200) {
                let dataSource = item.data.data
                let lengths = []
                dataSource.map((value, index) => {
                    let num = 0
                    value.list.map((value1, index1) => {
                        num += value1.list.length
                    })
                    console.log(num);
                    lengths.push(num)
                })
                // console.log('123', lengths);
                this.setState({
                    loading: false,
                    dataSource: item.data.data,
                    lengths: lengths
                })
            } else {
                openModalMessage('error', item.data.msg)
            }
        })
    }
    // 上一页
    // top = () => {
    //     const { one } = this.state
    //     let dataAll = Math.ceil(this.b.offsetHeight / 1123)
    //     this.setState({
    //         dataAll: dataAll
    //     })
    //     if (one > 0) {
    //         this.setState({
    //             loading: true
    //         })
    //         setTimeout(() => {
    //             this.setState({
    //                 loading: false,
    //                 one: one - 1
    //             }, () => {
    //                 var obj = document.getElementById("frameContent");  //获取内容层
    //                 obj.scrollTo(100, 1123 * (one - 1))
    //                 console.log('上', one);
    //             })
    //         }, 300);
    //     } else {
    //         openModalMessage('warning', '已经是第一页了')
    //     }
    // }
    // // 下一页
    // bottom = () => {
    //     const { one } = this.state
    //     let dataAll = Math.ceil(this.b.offsetHeight / 1123)
    //     this.setState({
    //         dataAll: dataAll
    //     })
    //     if (one < (Math.ceil(this.b.offsetHeight / 1123) - 1)) {
    //         this.setState({
    //             loading: true
    //         })
    //         setTimeout(() => {
    //             this.setState({
    //                 loading: false,
    //                 one: one + 1
    //             }, () => {
    //                 var obj = document.getElementById("frameContent");  //获取内容层
    //                 obj.scrollTo(100, 1123 * (one + 1))
    //                 console.log('下', one);
    //             })
    //         }, 300);
    //     } else {
    //         openModalMessage('warning', '已经是最后一页了')
    //     }
    // }
    // 打印



    onClick = () => {
        window.document.body.innerHTML = window.document.getElementById('billDetails').innerHTML;
        window.print();
        window.location.reload();
    }
    // 分页
    onChange = () => {
        console.log(123);
    }
    render() {
        const { one, loading, dataSource, lengths, dataAll } = this.state
        return (
            <div>
                <BasicLayoutSearch style={{ height: "70px" }}>
                    <PageHeader
                        style={{ padding: '4px 24px', height: '40px' }}
                        onBack={() => window.history.back()}
                        title={'返回引入数据页'}>
                    </PageHeader>
                </BasicLayoutSearch>
                <Spin spinning={loading} >
                    <div style={{
                        width: '22cm',
                        height: '1123px',
                        margin: '.5cm auto',
                        // backgroundColor: 'red',
                        // zIndex: '100',
                        // background: 'white',
                        overflowY: 'scroll'
                    }}
                        id={'frameContent'}
                    >
                        <div ref={(ref) => { this.b = ref }} id={'billDetails'} style={{
                            width: '21cm',
                            minHeight: '1123px',
                            padding: '20px',
                            margin: ' auto',
                            border: '1px #D3D3D3 solid',
                            borderRadius: '5px',
                            background: 'white',
                            boxShadow: ' 0 0 5px rgba(0, 0, 0, 0.1)',
                        }}>
                            <div style={{ width: "100%", textAlign: 'center', fontSize: '24px', fontWeight: 'bolder', marginBottom: '10px', height: '36px' }}>表单样式预览</div>
                            <table className='Examin_table' id='Examin_table1'>
                                <thead>
                                    <tr height={50}>
                                        {/* <th>第一所属类别</th> */}
                                        <th>类别</th>
                                        <th>检验标准名称</th>
                                        <th>检验标准</th>
                                        <th>检验结果</th>
                                        <th>纠正措施</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        dataSource.map((value, index) => {
                                            return ([
                                                value.list.map((value1, index1) => {
                                                    return ([
                                                        value1.list.map((value2, index2) => {
                                                            return ([
                                                                <tr key={`SSS${index2}`} style={{ textAlign: 'left' }} height={35}>
                                                                    {/* {index1 === 0 && index2 === 0 ? <td rowSpan={lengths[index]} >{value.checkTypeFirst}</td> : null} */}
                                                                    {index2 === 0 ? <td rowSpan={value1.list.length} style={{ textAlign: 'center', writingMode: 'tb-rl' }} >{value1.checkTypeSecond}</td> : null}
                                                                    <td style={{ paddingLeft: '10px' }}>{value2.checkItemName}</td>
                                                                    <td style={{ paddingLeft: '10px' }}>{value2.checkStandard}</td>
                                                                    <td style={{ paddingLeft: '10px' }}></td>
                                                                    <td style={{ paddingLeft: '10px' }}></td>
                                                                </tr>
                                                            ])
                                                        })
                                                    ])
                                                })
                                            ])
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </Spin >
                {/* <div style={{ position: 'fixed', left: '350px', top: '450px', fontSize: '20px', fontWeight: 'bold', cursor: 'pointer' }} className={'Examin_arrows'} onClick={this.top}>{'<-上一页'}</div>
                <div style={{ position: 'fixed', right: '200px', top: '450px', fontSize: '20px', fontWeight: 'bold', cursor: 'pointer' }} className={'Examin_arrows'} onClick={this.bottom}>{'下一页->'}</div> */}
                {/* <div style={{ position: 'fixed', bottom: '20px', right: '20px' }}> */}
                {/* <div style={{ fontSize: '20px', fontWeight: 'bold' }}>{<span style={{ color: 'red' }}>{`总页数为:${dataAll} 当前是第${one + 1}页`}</span>}</div> */}
                {/* <Button onClick={this.onClick} type='primary'>点我打印</Button> */}
                {/* </div> */}

            </div >

        )
    }
}
